{% extends 'base.html' %} {% block css%}
<style type="text/css"></style>
{% endblock %} {% block body%}
    <div class="row">

        <!-- 
        Host side PRBS
        1 Generator: SetPcsTestPatternGeneratorConfig(4,1,1,1)
        2 Checker: SetPcsTestPatternCheckerConfig(4,2,1,1)
        3 Statistics: GetPcsTestPatternCheckerStatistics(4,2)

        Line side PRBS
        1 Generator: SetCoreCfecTestPatternGeneratorConfig(5,1)
        2 Checker: SetCoreCfecTestPatternCheckerConfig(5,1)
        3 Statistics: GetCoreCfecTestPatternCheckerCounters()
         -->

        <div class="col-md-6">
            <h3>Line side PRBS</h3>
            <table class="table table-hover table-responsive table-condensed form-inline">
                <tr>
                    <td>Config</td>
                    <td> 
                        Signal Type &nbsp;
                        <select class="form-control" style="width:150px; height:30px" id="line_side_prbs_config_p1">
                            <option value="0">CFEC_PRBS_7</option>
                            <option value="1">CFEC_PRBS_9</option>
                            <option value="2">CFEC_PRBS_11</option>
                            <option value="3">CFEC_PRBS_13</option>
                            <option value="4">CFEC_PRBS_15</option>
                            <option value="5">CFEC_PRBS_23</option>
                            <option value="6" selected>CFEC_PRBS_31</option>
                        </select>

                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <button id="btn_line_side_prbs_config_enble" class="btn btn-success">Enable</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <button id="btn_line_side_prbs_config_disable" class="btn btn-warning">Disable</button>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td></td>
                </tr>
  
                <tr>
                    <td style="font-size: 18px">bit_count</td>
                    <td id="bit_count">-</td>
                </tr>

                <tr>
                    <td style="font-size: 18px">err_count</td>
                    <td id="err_count">-</td>
                </tr>

                <tr>
                    <td style="font-size: 18px">resync_count</td>
                    <td  id="resync_count">-</td>
                </tr>

                <tr>
                    <td colspan="2">
                        <button id="btn_line_side_prbs" class="btn btn-lg btn-success">
                            Get
                            <i id="btn_line_side_prbs_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                        </button>
                    </td>
                </tr>
            </table>



            <button id="data_clear" class="btn btn-lg btn-primary">
                Data Clear
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;

            <button id="auto_refresh" class="btn btn-lg btn-success">
                Auto Refresh (3s)
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button id="stop_auto_refresh" class="btn btn-lg btn-danger">
                Stop Refresh
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span id="auto_refresh_info" style="color: blue;"></span>



        </div>

        <div class="col-md-6">
            <h3>Host side PRBS</h3>
            <table class="table table-hover table-responsive table-condensed">
                <tr>
                    <td>Config</td>
                    <td> 
                        <button id="btn_host_side_prbs_config_enble" class="btn btn-success">Enable</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <button id="btn_host_side_prbs_config_disable" class="btn btn-warning">Disable</button>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td></td>
                </tr>

                <tr>
                    <td style="font-size: 18px">accum_bit_count</td>
                    <td id="accum_bit_count">-</td>
                </tr>

                <tr>
                    <td style="font-size: 18px">accum_err_count</td>
                    <td id="accum_err_count">-</td>
                </tr>

                <tr>
                    <td style="font-size: 18px">ber</td>
                    <td id="ber">-</td>
                </tr>

                <tr>
                    <td colspan="2">
                        <button id="btn_host_side_prbs" class="btn btn-lg btn-success">
                        Get
                         <i id="btn_host_side_prbs_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                        </button>
                    </td>
                </tr>
            </table>
        </div>

    </div>
{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">
var t;


function set_password()
{
    url = "/api/set_password";
    $.get(url, function(data, status) {
        console.log(data);
    });
}


function auto_refresh()
{
    // line_side_prbs ////////////////////////////////
    $("#auto_refresh_info").html("Updating data ...");
    $.post(
        "api/btn_line_side_prbs", {
        },
        function(data, status) {
            var obj=JSON.parse(data)
            console.log(obj);
            $("#bit_count").html(obj["bit_count"]);
            $("#err_count").html(obj["err_count"]);
            $("#resync_count").html(obj["resync_count"]);

            // line_side_prbs ////////////////////////////////
            $.post(
                "api/btn_host_side_prbs", {
                },
                function(data, status) {
                    var obj=JSON.parse(data)
                    console.log(obj);
                    $("#accum_bit_count").html(obj["accum_bit_count"]);
                    $("#accum_err_count").html(obj["accum_err_count"]);
                    $("#ber").html(obj["ber"]);

                    $("#auto_refresh_info").html("All data is up to date.");
                }
            );



        }
    );

     t = setTimeout(auto_refresh, 3000);
}


$(document).ready(function() {
    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-center"
    }

    $("#btn_line_side_prbs_loading").hide();
    $("#btn_host_side_prbs_loading").hide();

    set_password();

    $("#btn_line_side_prbs_config_enble").click(function() {

        $.post(
            "api/btn_line_side_prbs_config_enble", {
                p1: $("#line_side_prbs_config_p1").val(),
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
            }
        );
    });

    $("#btn_line_side_prbs_config_disable").click(function() {

        $.post(
            "api/btn_line_side_prbs_config_disable", {
                p1: $("#line_side_prbs_config_p1").val(),
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
            }
        );
    });


    $("#btn_host_side_prbs_config_enble").click(function() {

        $.post(
            "api/btn_host_side_prbs_config_enble", {
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
            }
        );
    });

    $("#btn_host_side_prbs_config_disable").click(function() {

        $.post(
            "api/btn_host_side_prbs_config_disable", {
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
            }
        );
    });


    $("#btn_line_side_prbs").click(function() {
        $("#btn_line_side_prbs_loading").show();
        $.post(
            "api/btn_line_side_prbs", {
            },
            function(data, status) {
                // console.log("data: " + data);
                // $("#line_side_info").append(data);
                var obj=JSON.parse(data)
                console.log(obj);

                $("#bit_count").html(obj["bit_count"]);
                $("#err_count").html(obj["err_count"]);
                $("#resync_count").html(obj["resync_count"]);

                $("#btn_line_side_prbs_loading").hide();
            }
        );
    });

    $("#btn_host_side_prbs").click(function() {
        $("#btn_host_side_prbs_loading").show();
        $.post(
            "api/btn_host_side_prbs", {
            },
            function(data, status) {
                // console.log("data: " + data);
                // $("#host_side_info").append(data);
                var obj=JSON.parse(data)
                console.log(obj);

                $("#accum_bit_count").html(obj["accum_bit_count"]);
                $("#accum_err_count").html(obj["accum_err_count"]);
                $("#ber").html(obj["ber"]);

                $("#btn_host_side_prbs_loading").hide();
            }
        );
    });


    $("#data_clear").click(function() {
        $("#auto_refresh_info").html("Data clear ...");
        $.post(
            "api/data_clear", {
            },
            function(data, status) {
                // console.log(data);
                $("#auto_refresh_info").html("Data clear, ok.");
            }
        );
    });



    $("#auto_refresh").click(function() {
       auto_refresh();
    });

    $("#stop_auto_refresh").click(function() {
       clearTimeout(t);
        $("#auto_refresh_info").html("Auto refresh is disabled.");
    });


});
</script>
{% endblock %}